/**面包屑 */
import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Breadcrumb } from 'antd';
import styles from '../index.less';
const breadcrumbNameMap: any = {
  //跟路由路径保持一致
  '/': '首页',
  '/lotteryWhiteList': '抽奖白名单',
  '/createActivity': '创建活动',
  '/activityComment': '活动评论',
  '/createActivity/addActivity': '添加',
};

const Nav = withRouter((props) => {
  const {
    location: { pathname },
  } = props;

  //将路径转为数组
  const pathSnippets = pathname.split('/').filter((i) => i);

  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    //因为面包屑是带有返回上一层的作用，所以需要获取更上一级的路径
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;

    return (
      <Breadcrumb.Item key={url}>
        <Link
          to={url}
          onClick={() => {
            console.log(12312);
          }}
        >
          {breadcrumbNameMap[url]}
        </Link>
      </Breadcrumb.Item>
    );
  });
  const breadcrumbItems = [
    <Breadcrumb.Item key="home">
      <Link to="/">首页</Link>
    </Breadcrumb.Item>,
  ].concat(extraBreadcrumbItems);
  return (
    <div className={styles.title}>
      <Breadcrumb>{extraBreadcrumbItems}</Breadcrumb>
      <div
        style={{
          fontSize: 18,
          color: 'rgba(0, 0, 0, 0.847058823529412)',
          fontWeight: 700,
        }}
      >
        {breadcrumbNameMap[pathname]}
      </div>
    </div>
  );
});
export default Nav;
